<template>
  <view>
    <view class="uni-section">
      <view class="uni-section-header" nvue>
        <view v-if="type" class="uni-section__head">
          <view :class="type" class="uni-section__head-tag"/>
        </view>
        <view class="uni-section__content">
          <text :class="{'distraction':!subTitle}" :style="{color:color}"
                class="uni-section__content-title" style="background-color: #55ff00;padding: 10upx;">
            {{ index }}、{{ step.note.title }}
          </text>
        </view>
      </view>
      <view v-if="step.note.classify===110" style="padding: 0;">
        <img style="width: 100%;" :src="getImgUrl()" alt="" @click="previewImg(getImgUrl())"/>
      </view>
      <view v-else :style="{padding: padding ? '10px' : ''}">
        <u-parse v-if="step.note.content" className="else-parse" :content="step.note.content" :autosetTitle="false"
                 :show-with-animation="true" :selectable="true"></u-parse>
      </view>
    </view>

  </view>
</template>

<script>
import {fileBaseUrl} from '../../../config/config'

export default {
  name: "NoteCard",
  props: {
    noteId: {
      type: Number
    },
    step: {
      type: Object
    },

    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#333'
    },
    subTitle: {
      type: String,
      default: ''
    },
    padding: {
      type: Boolean,
      default: true
    },
    index: {
      type: Number,
      default: 0
    }

  },
  data() {
    return {}
  },
  created() {
    // console.info("onLoad")
    // console.info(this.noteId)
    // this.$api.getNoteByNoteId(this.noteId).then(res=>{
    // 	console.info(res.data)
    // 	this.note=res.data
    // });
  },
  onLoad() {

  },
  methods: {
    getImgUrl() {
      console.info(fileBaseUrl + this.step.note.content)
      return fileBaseUrl + this.step.note.content;
    },
    //图片预览
    previewImg(imgUrl) {
      console.info("预览", imgUrl)
      uni.previewImage({
        current: 0,
        urls: [imgUrl]
      })
    },
  }
}
</script>

<style lang="scss">
$uni-primary: #2979ff !default;

.uni-section {
  background-color: #fff;
  // overflow: hidden;
  margin-top: 10px;
}

.uni-section-header {
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  // height: 50px;
  font-weight: normal;
}

.uni-section__head {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 10px;

}

.line {
  height: 12px;
  background-color: $uni-primary;
  border-radius: 10px;
  width: 4px;
}

.circle {
  width: 8px;
  height: 8px;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: $uni-primary;
}

.uni-section__content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  flex: 1;
  color: #333;
}

.uni-section__content-title {
  font-size: 14px;
  color: $uni-primary;
}

.distraction {
  flex-direction: row;
  align-items: center;
}

.uni-section__content-sub {
  font-size: 12px;
  color: #999;
  line-height: 16px;
  margin-top: 2px;
}

/* 富文本的样式 */
/deep/ .wxParse .p {
  padding-bottom: 0em;
  text-indent: 2em;
}
</style>
